<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 连接模块 -->
<template>
  	<div class="connect_root" :style="{ 'background-color': background }">
		<div class="connected_root" v-show="connectStatus == '0'">
			<span class="connected_one" :class="{'rtl-l text-r': $rtl}">{{ $t('BDT_fascialgun_connect_fail') }}</span>
			<span class="connected_two" :class="{'rtl-l': $rtl}" @click="reconnectClick">{{ $t('BDT_fascialgun_reconnect') }}</span>
		</div>
		<div class="connected_root" v-show="connectStatus == '1'">
			<span class="connected_one" :class="{'rtl-l text-r': $rtl}">{{ $t('BDT_fascialgun_connecting') }}</span>
			<img class="right_icon" :class="{'rtl-l': $rtl}" :src="loading_img" >
		</div>
		<div class="connected_root" v-show="connectStatus == '2' && !runStatus">
			<span class="connected_one" :class="{'rtl-l text-r': $rtl}">{{ $t('BDT_fascialgun_connected') }}</span>
			<img class="right_icon" :class="{'rtl-l': $rtl}" @click="runClick" src="@/assets/image/ic_start.png">
		</div>
		<div class="connected_root" v-show="connectStatus == '2' && runStatus">
			<span class="connected_one" :class="{'rtl-l text-r': $rtl}">{{ $t('BDT_fascialgun_running') }}</span>
			<img class="right_icon" :class="{'rtl-l': $rtl}" @click="runClick" src="@/assets/image/ic_pause.png">
		</div>
	</div>
</template>

<script>
// 引入vuex辅助函数，mapMutations：用于修改管理的变量，mapState：获取变量
import { mapMutations, mapState } from 'vuex';

export default {
	data(){
		return {
			background: window.isDark ? '#202224' : '#FFFFFF',
			loading_img: window.isDark ? require("@/assets/image/dark/loading_dark.gif") : require("@/assets/image/loading_light.gif"),
			connect_img: require("@/assets/image/dark/loading_dark.gif"),
		}
	},
	computed: {
		...mapState([ 'connectStatus', 'runStatus' ])
	},
	methods: {
		...mapMutations(['runStatusMutations']),
		reconnectClick(){
			this.$emit('reconnectClick');
		},
		runClick(){
			this.runStatusMutations();
			this.$emit('runClick',this.runStatus);
		}
	}
}
</script>

<style scoped>
	.connect_root {
		height: 8.8rem;
		border-radius: 1.6rem;
		margin-bottom: 1.2rem;
		padding: 0 1.6rem;
		margin-top: .8rem;
	}

	.connected_root {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.connected_one {
		font-size: 1.8rem;
		font-weight: 500;
	}
	
	.connected_two {
		font-size: 1.8rem;
		color: #FB6522;
	}

	.right_icon{
		width: 4.8rem;
		height: 4.8rem;
	}
</style>
